<template>
	<div>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">复制链接</div>
			<el-input v-model="state.link" placeholder="请输入链接地址">
				<template #append>
					<el-button @click="copyText(state.link)">复制链接</el-button>
				</template>
			</el-input>
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">二维码</div>
			<div id="codeView"></div>
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">展开收起</div>
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<expandCollapse>
					<template #default>
						<el-form-item label="账号：">
							<el-input v-model="state.queryParams.account" placeholder="请输入账号" class="w-[200px]"> </el-input>
						</el-form-item>
						<el-form-item label="手机号：">
							<el-input v-model="state.queryParams.mobile" placeholder="请输入手机号" class="w-[200px]"> </el-input>
						</el-form-item>
					</template>
					<template #extend>
						<el-form-item label="账号：">
							<el-input v-model="state.queryParams.account" placeholder="请输入账号" class="w-[200px]"> </el-input>
						</el-form-item>
						<el-form-item label="昵称：">
							<el-input v-model="state.queryParams.nickname" placeholder="请输入昵称" class="w-[200px]"> </el-input>
						</el-form-item>
						<el-form-item label="手机号：">
							<el-input v-model="state.queryParams.mobile" placeholder="请输入手机号" class="w-[200px]"> </el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-select class="w-[150px]" v-model="state.queryParams.status">
								<el-option label="全部" value="" />
								<el-option label="正常" value="1" />
								<el-option label="禁用" value="0" />
							</el-select>
						</el-form-item>
						<el-form-item label="时间范围：">
							<datePicker v-model:dateTime="state.queryParams.create_time" :isPickerOptions="true" />
						</el-form-item>
					</template>
					<template #footer>
						<el-form-item class="!mr-0">
							<el-button-group>
								<el-button type="primary" icon="ele-Search"> 查询 </el-button>
								<el-button icon="ele-Refresh" class="ml15 mr15"> 重置 </el-button>
							</el-button-group>
						</el-form-item>
					</template>
				</expandCollapse>
			</el-form>
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">代码预览</div>
			<el-button size="default" type="primary" @click="state.previewData.show = true"> 显示 </el-button>
			<codePreview v-if="state.previewData.show" v-model="state.previewData.show" :code="state.previewData.code" />
		</el-card>
	</div>
</template>

<script setup lang="ts" name="compWidgets">
import { reactive, nextTick } from 'vue';
import QRCode from 'qrcodejs2-fix';
import commonFunction from '/@/utils/commonFunction';

const { copyText } = commonFunction();

const state = reactive({
	link: '',
	queryParams: {
		account: '',
		nickname: '',
		mobile: '',
		status: '',
		group_id: '',
		create_time: '',
	},
	previewData: {
		show: false,
		code: [
			{
				name: '文件',
				content: 'console.log(1)',
				type: 'js'
			},
			{
				name: '文件2',
				content: 'console.log(2)',
				type: 'js'
			}
		],
	},
});

const showQrcode = () => {
	nextTick(() => {
		let codeView = document.querySelector('#codeView');
		codeView.innerHTML = '';
		new QRCode(codeView, {
			text: '测试内容', 
			width: 220,
			height: 220,
		});
	});
};

showQrcode();
</script>

<style scoped lang="scss"></style>
